<!DOCTYPE html>
<%@page import="com.faeple.util.SessionManager"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8" pageEncoding="utf-8"%>
<html lang="ko">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
	<title>Faeple</title>
	
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="/resources/css/font-awesome.css">
	<style type="text/css">
		body {
			color:#333;
		}
		#userList{padding-left:0;list-style:none;margin-bottom:0;}
		#userList li { padding:4px 12px;}
		#userList li:hover{
			background-color: #ddd;
			cursor: pointer;
		}
		#userList .profileImage{ width:30px;height:30px;border-radius:2px;margin-right:6px; }
	</style>
</head>
<body>
<%@ include file="menu.jsp" %>

<div class="container">
	<div class="page-header">
		<h2 id="tables">안드로이드 GCM 전송</h2>
    </div>
</div>

<div class="container">
<p>Sender Id : <strong>AIzaSyCBYHunMiiz09btDbOfM5KCH4CC_OEO5Ts</strong></p>
<p>등록된 기기 : <strong>${gcmCount}개</strong></p>
<p>보낼 대상 :</p>

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-default active">
		<input type="radio" name="target" id="target" value="all" autocomplete="off" checked>모두
	</label>
	<label class="btn btn-default">
		<input type="radio" name="target" id="target" value="user" autocomplete="off">사용자
	</label>
</div>

<div id="show-member" style="display:none;margin-top:15px;position:relative;">
<label for="target-member">사용자 선택 : </label>
<input type="text" class="form-control" id="target-member" name="target-member" placeholder="아이디 또는 이름을 입력하세요" onkeyup="searchUser(this.value)">
<input type="hidden" id="target-idx" name="target-idx">
<img src="/resources/img/loading-20x20-white.gif" id="search-loading" style="position:absolute;top:32px;right:8px;display:none;">
<div id="userList-wrapper" style="position:absolute;top:60px;left:0;width:200px;background-color:#fff;border:1px solid #ddd;display:none;border-radius:4px;padding:6px 0;">
	<ul id="userList"><li>aaaa</li></ul>
</div>
</div>
<div class="form-group" style="margin-top: 25px;">
	<label for="push-title">제목</label>
	<input type="text" class="form-control" id="push-title" name="push-title" title="제목" placeholder="제목을 입력해 주세요">
	<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
	<div id="business-email-message" class="form_message"></div>
</div>
<div class="form-group" style="margin-top: 25px;">
	<label for="push-content">내용</label>
	<input type="text" class="form-control" id="push-content" name="push-content" title="내용" placeholder="내용을 입력해 주세요">
	<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
	<div id="business-email-message" class="form_message"></div>
</div>
<button class="btn btn-primary" style="margin-top:15px;" onclick="send(this)">전송</button>
</div>
</body>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script type="text/javascript" src="/resources/js/mention.js"></script>
<script type="text/javascript">
	var target = "all";
	var loader;
	$(function(){
		loader = $("#search-loading");
		$("input[name='target']").change(function(){
			target = $(this).val();
			if(target == "user"){
				$("#show-member").fadeIn();
			}else{
				$("#show-member").hide();
			}
		});
	});
	
	function searchUser(value){
		var list = $("#userList");
		if(value.length > 1){
			$.ajax({
			    type : "get"
			    , url : "/config/admin/push/gcmUserSearch?value="+value
			    , dataType : "json"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	$("#userList-wrapper").hide();
			    }
			    , success : function(data) {
			    	console.log(JSON.stringify(data));
			    	list.empty();
			    	if(typeof data.length != "undefined"){
			    		for(var i=0;i<data.length;i++){
			    			list.append("<li onclick='selectMember("+data[i].idx+", \""+data[i].name+"\")'><img src='/resources/upload/profile/thumbnail/"+data[i].profileImage+"' class='profileImage'>"+data[i].name+" @"+data[i].id+"</li>");
			    		}
			    	}else{
			    		$("#userList-wrapper").hide();
			    	}
			    	$("#userList-wrapper").show();
			    }
			    , beforeSend: function() {
			    	loader.show(0);
			    }
			    , complete: function(){
			    	loader.hide(0);
			    }
			});
		}else{
			$("#userList-wrapper").hide();
		}
	}
	
	function selectMember(idx, name){
		$("#target-member").val(name);
		$("#target-idx").val(idx);
		$("#userList-wrapper").hide();
	}
	
	function send(btn){
		if($("#push-title").val() == ""){
			alertShow("danger", "제목을 입력해 주세요", 2000);
			return false;
		}
		if($("#push-content").val() == ""){
			alertShow("danger", "내용을 입력해 주세요", 2000);
			return false;
		}
		if(target=="user" && $("#target-idx").val() == ""){
			alertShow("danger", "전송할 사용자를 선택해 주세요", 2000);
			return false;
		}
		$(btn).attr("disabled","disabled").html("전송중...");
		var data = "target="+target+"&target-idx="+$("#target-idx").val()+"&title="+$("#push-title").val()+"&content="+$("#push-content").val();
		$.ajax({
		    type : "get"
		    , url : "/config/admin/push/sendGcmPush"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	
		    }
		    , success : function(result) {
		    	if(target == "user"){
		    		if(result == "execute"){
			    		alertShow("success", "전송되었습니다", 2000);
			    	}else if(result == "fail"){
			    		alertShow("danger", "다시 시도해 주세요", 2000);
			    	}else{
			    		alertShow("danger", "사용자가 잘못되었습니다", 2000);
			    	}
		    	}else{
		    		if(result == "execute"){
			    		alertShow("sucess", "전송되었습니다", 2000);
			    	}else{
			    		alertShow("danger", "일부 푸시전송이 실패하였습니다<br>실패한 개수 "+result+"개", null);
			    	}
		    	}
		    }
		    , complete: function(){
		    	$(btn).removeAttr("disabled").html("전송");
		    }
		});
	}
</script>
</html>